<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影视剧留言板</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./jquery.min.js"></script>
</head>

<body>
  <div class="comments">

    <!-- 评论内容 -->
    <h3 class="comm-head">评论</h3>
    <div class="comm-input">
      <textarea placeholder="爱发评论的人，运气都很棒" maxlength="100"></textarea>
      <div class="foot">
        <div class="word">0/100</div>
        <div class="btn">发表评论</div>
      </div>
    </div>
    <!-- 头部 -->
    <h3 class="comm-head">
      热门评论<sub>(5)</sub>
      <span class="active">默认</span>
      <span>时间</span>
    </h3>
    <!-- 评论列表 -->
    <ul class="comm-list">
      <li class="comm-item">
        <div class="avatar"></div>
        <div class="info">
          <p class="name">
            清风徐来
          </p>
          <p class="time">
            <span>2012-12-12</span>
            <span class="iconfont icon-collect-sel"></span>
          </p>
          <p>
            这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
          </p>
        </div>
      </li>
    </ul>
  </div>
</body>
<script>
  // 获取文本框里的内容 
  // 添加到评论区
  // 发布评论后 文本框内容清空
  // 内容置顶 内容可以删除
  var user = {
    name: '清风徐来',
    avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    vip: true,
  }
  // 评论列表
  let comments = [
    {
      id: 100,
      name: '__RichMan',
      avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
      content:
        '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
      time: new Date('2022/10/12 10:10:23'),
      vip: true,
      collect: false,
    },
    {
      id: 101,
      name: '糖蜜甜筒颖',
      avatar:
        'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
      content:
        '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
      time: new Date('2019/02/23 15:12:44'),
      vip: false,
      collect: true,
    },
    {
      id: 102,
      name: '清风徐来',
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
      content:
        '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
      time: new Date('2021/07/01 00:30:51'),
      vip: true,
      collect: false,
    },
  ]
  function ed() {
    const ul = document.querySelector('ul')
    $('.comm-head sub ').text(`(${comments.length})`)
    const t = comments.map(function (item, i) {
      return `
  <li class="comm-item">
        <div class="avatar" style='background-image:url(${item.avatar})'></div>
        <div class="info">
          <p class="name">
            ${item.name}
          </p>
          <p class="time">
            <span>${item.time.getFullYear()}-${item.time.getMonth()}-${item.time.getDate()}</span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del">删除</span>
          </p>
          <p>
            ${item.content}
          </p>
        </div>
      </li>
  `
    }).join('')
    ul.innerHTML = t
  }
  ed()
  $('.btn').click(function () {
    if ($('textarea').val() === '') {
      alert('请输入内容')
      return false
    }
    const e = {
      id: 100,
      name: '一一',
      avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
      content:
        `${$('textarea').val()}`,
      time: new Date(),
      vip: true,
      collect: false,
    }
    comments.unshift(e)
    $('textarea').val('')
    ed()
  })
  $('textarea').on('input',function(){
    $('.word').text($(this).val().length+'/100')
  })
    $('ul').on('click','.del',function(){
    const l=$(this).parents('.comm-item').index()
    comments.splice( l,1)
    ed()
  })

 
</script>

</html>